import React,{Component,Fragment} from 'react';
import { Layout as Ly } from 'antd';
import { NONAME } from 'dns';
const {Header,Footer,Sider,Content} = Ly;

class Layout extends Component{
  constructor(props){
    super(props);
    this.state = {
      'visiabe':true
    }
  }
  render(){
    return(
      <Fragment>
        <Ly>
          <Header style={{backgroundColor:'#3598db',height:'6vh',lineHeight:'6vh'}}>
            {
              this.renderChild(this.props.children,'header')
            }
          </Header>
          <Ly style={{backgroundColor:'#f3f4f8',height:'88vh'}}>
            <Sider theme="light" width="400"
             breakpoint="md" style={this.state.visiable?{background:'#f3f4f8'}:{display:'none',background:'#f3f4f8'}} onBreakpoint={this.changeVisiable.bind(this)}>
              {
                this.renderChild(this.props.children,'sider')
              }
            </Sider>
            <Content>
              {
                this.renderChild(this.props.children,'content')
              }
            </Content>
          </Ly>
          <Footer style={{backgroundColor:'#3598db',height:'6vh'}}>
            {
                this.renderChild(this.props.children,'footer')
              }
          </Footer>
        </Ly>
      </Fragment>
    )
  }
  //控制节点内容分发
  renderChild(child,name){
    for(let n in child){
      let one = child[n];
      if(one.props[name]){
        return one;
      }
    }
    return '';
  }
  changeVisiable(broken){
    this.setState({
      'visiable':!broken
    });
    
  } 
}

export default Layout;